<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片墙 - Gallery</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
    <style>
        :root {
            --primary-bg: #1a1a1a;
            --accent-gold: #d4af37;
            --text-light: #f8f8f8;
            --text-muted: #a0a0a0;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: var(--primary-bg);
            color: var(--text-light);
            overflow-x: hidden;
        }
        
        .nav-blur {
            backdrop-filter: blur(20px);
            background: rgba(26, 26, 26, 0.8);
        }
        
        .filter-btn {
            transition: all 0.3s ease;
        }
        
        .filter-btn.active {
            background: var(--accent-gold);
            color: black;
            transform: scale(1.05);
        }
        
        .photo-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            opacity: 1;
            transform: scale(1);
        }
        
        .photo-card.hidden {
            opacity: 0;
            transform: scale(0.8);
            pointer-events: none;
        }
        
        .photo-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 40px rgba(212, 175, 55, 0.2);
        }
        
        .photo-card img {
            transition: all 0.3s ease;
        }
        
        .photo-card:hover img {
            filter: brightness(1.1) contrast(1.1);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, var(--accent-gold), #f4d03f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .masonry-grid {
            column-count: 4;
            column-gap: 1rem;
        }
        
        @media (max-width: 1024px) {
            .masonry-grid { column-count: 3; }
        }
        
        @media (max-width: 768px) {
            .masonry-grid { column-count: 2; }
        }
        
        @media (max-width: 480px) {
            .masonry-grid { column-count: 1; }
        }
        
        .masonry-item {
            break-inside: avoid;
            margin-bottom: 1rem;
        }
        
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1rem;
        }
        
        .list-layout {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
        
        .list-layout .photo-card {
            display: flex;
            align-items: center;
            gap: 2rem;
        }
        
        .list-layout .photo-card img {
            width: 200px;
            height: 150px;
            object-fit: cover;
            border-radius: 0.5rem;
        }
        
        .search-container {
            position: relative;
        }
        
        .search-results {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: rgba(26, 26, 26, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid #374151;
            border-radius: 0.5rem;
            max-height: 300px;
            overflow-y: auto;
            z-index: 10;
            display: none;
        }
        
        .search-result-item {
            padding: 0.75rem;
            border-bottom: 1px solid #374151;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .search-result-item:hover {
            background: rgba(212, 175, 55, 0.1);
        }
        
        .loading-spinner {
            display: none;
            text-align: center;
            padding: 2rem;
        }
        
        .spinner {
            border: 3px solid #374151;
            border-top: 3px solid var(--accent-gold);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .scroll-reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }
        
        .scroll-reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="fixed top-0 w-full z-50 nav-blur border-b border-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="index.html" class="text-xl font-bold gradient-text">Gallery</a>
                </div>
                <!-- User Menu -->
                <div class="hidden md:flex items-center space-x-4">
                    <div id="user-menu" class="hidden items-center space-x-3">
                        <button id="user-menu-btn" class="flex items-center space-x-2 text-gray-300 hover:text-yellow-400 transition-colors">
                            <img id="user-avatar" src="resources/default-avatar.jpg" alt="头像" class="w-8 h-8 rounded-full">
                            <span id="username" class="text-sm font-medium"></span>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                    </div>
                    <a href="login.html" id="login-btn" class="text-gray-300 hover:text-yellow-400 px-3 py-2 text-sm font-medium transition-colors">登录</a>
                    <a href="register.html" id="register-btn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg text-sm font-medium transition-colors">注册</a>
                </div>
            </div>
        </div>
        
        <!-- User Dropdown Menu -->
        <div id="user-dropdown" class="hidden absolute right-4 top-16 mt-2 w-48 bg-gray-800 rounded-lg shadow-lg border border-gray-700 z-50">
            <div class="py-2">
                <a href="profile.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-yellow-400 transition-colors">个人中心</a>
                <a href="upload.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-yellow-400 transition-colors">上传照片</a>
                <a href="gallery.html" class="block px-4 py-2 text-sm text-yellow-400 bg-gray-700">照片墙</a>
                <hr class="border-gray-700">
                <button id="logout-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-red-400 transition-colors">退出登录</button>
            </div>
        </div>
    </nav>

    <!-- Header Section -->
    <section class="pt-24 pb-12 px-4">
        <div class="max-w-7xl mx-auto text-center">
            <h1 class="text-4xl md:text-6xl font-bold gradient-text mb-4">照片墙</h1>
            <p class="text-xl text-gray-400 max-w-2xl mx-auto">
                探索我们的精选摄影作品集合，每一张照片都讲述着独特的故事
            </p>
        </div>
    </section>

    <!-- Controls Section -->
    <section class="pb-8 px-4">
        <div class="max-w-7xl mx-auto">
            <!-- Search Bar -->
            <div class="mb-8">
                <div class="search-container max-w-md mx-auto">
                    <div class="relative">
                        <input type="text" id="search-input" placeholder="搜索照片..." 
                               class="w-full px-4 py-3 pl-12 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-yellow-500 focus:ring-2 focus:ring-yellow-500/20">
                        <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </div>
                    <div id="search-results" class="search-results"></div>
                </div>
            </div>

            <!-- Filter Buttons -->
            <div class="flex flex-wrap justify-center gap-3 mb-8">
                <button onclick="filterPhotos('all')" class="filter-btn active px-6 py-2 rounded-full bg-gray-700 text-white font-medium">
                    全部
                </button>
                <button onclick="filterPhotos('landscape')" class="filter-btn px-6 py-2 rounded-full bg-gray-700 text-white font-medium">
                    风景
                </button>
                <button onclick="filterPhotos('architecture')" class="filter-btn px-6 py-2 rounded-full bg-gray-700 text-white font-medium">
                    建筑
                </button>
                <button onclick="filterPhotos('nature')" class="filter-btn px-6 py-2 rounded-full bg-gray-700 text-white font-medium">
                    自然
                </button>
                <button onclick="filterPhotos('street')" class="filter-btn px-6 py-2 rounded-full bg-gray-700 text-white font-medium">
                    街拍
                </button>
                <button onclick="filterPhotos('abstract')" class="filter-btn px-6 py-2 rounded-full bg-gray-700 text-white font-medium">
                    抽象
                </button>
                <button onclick="filterPhotos('blackwhite')" class="filter-btn px-6 py-2 rounded-full bg-gray-700 text-white font-medium">
                    黑白
                </button>
            </div>

            <!-- Layout Controls -->
            <div class="flex justify-center gap-4 mb-8">
                <button onclick="changeLayout('masonry')" class="layout-btn active px-4 py-2 bg-gray-700 text-white rounded-lg">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                    </svg>
                </button>
                <button onclick="changeLayout('grid')" class="layout-btn px-4 py-2 bg-gray-700 text-white rounded-lg">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                    </svg>
                </button>
                <button onclick="changeLayout('list')" class="layout-btn px-4 py-2 bg-gray-700 text-white rounded-lg">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </section>

    <!-- Gallery Section -->
    <section class="pb-20 px-4">
        <div class="max-w-7xl mx-auto">
            <div id="gallery" class="masonry-grid">
                <!-- Photos will be loaded here -->
            </div>
            
            <div class="loading-spinner" id="loading">
                <div class="spinner"></div>
                <p class="text-gray-400 mt-4">加载中...</p>
            </div>
            
            <div class="text-center mt-12">
                <button id="load-more" onclick="loadMorePhotos()" class="bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
                    加载更多
                </button>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-black py-12 px-4">
        <div class="max-w-7xl mx-auto text-center">
            <div class="mb-8">
                <h3 class="text-2xl font-bold gradient-text mb-4">Gallery</h3>
                <p class="text-gray-400 max-w-md mx-auto">
                    用心记录每一个美好瞬间，用镜头诉说生活的故事
                </p>
            </div>
            <div class="border-t border-gray-800 pt-8">
                <p class="text-gray-500">
                    © 2025 Gallery. 保留所有权利。
                </p>
            </div>
        </div>
    </footer>

    <script src="mode/main.js"></script>
    <script>
        // Gallery-specific functionality
        let currentPage = 1;
        const photosPerPage = 12;
        let filteredPhotos = [...photos];
        let displayedPhotos = [];

        // Initialize gallery
        document.addEventListener('DOMContentLoaded', function() {
            initializeGallery();
            setupSearch();
        });

        function initializeGallery() {
            loadGalleryPhotos();
            setupScrollReveal();
        }

        function loadGalleryPhotos() {
            const gallery = document.getElementById('gallery');
            const startIndex = (currentPage - 1) * photosPerPage;
            const endIndex = startIndex + photosPerPage;
            const photosToShow = filteredPhotos.slice(0, endIndex);
            
            // Clear gallery if it's the first page
            if (currentPage === 1) {
                gallery.innerHTML = '';
                displayedPhotos = [];
            }
            
            // Add new photos
            const newPhotos = photosToShow.slice(displayedPhotos.length);
            newPhotos.forEach((photo, index) => {
                const photoElement = createGalleryPhotoElement(photo, displayedPhotos.length + index);
                gallery.appendChild(photoElement);
                displayedPhotos.push(photo);
            });
            
            // Update load more button
            const loadMoreBtn = document.getElementById('load-more');
            if (displayedPhotos.length >= filteredPhotos.length) {
                loadMoreBtn.style.display = 'none';
            } else {
                loadMoreBtn.style.display = 'inline-block';
            }
            
            // Setup click events for new photos
            setupGalleryPhotoClickEvents();
        }

        function createGalleryPhotoElement(photo, index) {
            const div = document.createElement('div');
            div.className = `masonry-item photo-card scroll-reveal`;
            div.dataset.category = photo.category;
            div.dataset.index = index;
            div.dataset.photoId = photo.id;
            
            div.innerHTML = `
                <div class="relative overflow-hidden rounded-lg bg-gray-800">
                    <img src="${photo.url}" alt="${photo.title}" 
                         class="w-full h-auto object-cover transition-all duration-300 hover:scale-105"
                         loading="lazy">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300">
                        <div class="absolute bottom-0 left-0 right-0 p-4">
                            <h3 class="text-white font-semibold text-lg mb-1">${photo.title}</h3>
                            <p class="text-gray-300 text-sm">${photo.description}</p>
                            <div class="flex items-center mt-2">
                                <span class="inline-block px-2 py-1 bg-yellow-500 text-black text-xs rounded-full">
                                    ${getCategoryName(photo.category)}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            return div;
        }

        function getCategoryName(categoryId) {
            const categoryMap = {
                'landscape': '风景',
                'architecture': '建筑',
                'nature': '自然',
                'street': '街拍',
                'abstract': '抽象',
                'blackwhite': '黑白',
                'macro': '微距'
            };
            return categoryMap[categoryId] || categoryId;
        }

        function setupGalleryPhotoClickEvents() {
            const photoCards = document.querySelectorAll('.photo-card:not([data-click-setup])');
            photoCards.forEach(card => {
                card.setAttribute('data-click-setup', 'true');
                card.addEventListener('click', function() {
                    const index = parseInt(this.dataset.index);
                    openLightbox(index);
                });
            });
        }

        function filterPhotos(category) {
            // Update active filter button
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // Filter photos
            if (category === 'all') {
                filteredPhotos = [...photos];
            } else {
                filteredPhotos = photos.filter(photo => photo.category === category);
            }
            
            currentFilter = category;
            currentPage = 1;
            
            // Reload gallery with animation
            animateGalleryReload();
        }

        function animateGalleryReload() {
            const gallery = document.getElementById('gallery');
            const photoCards = gallery.querySelectorAll('.photo-card');
            
            // Animate out
            anime({
                targets: photoCards,
                opacity: [1, 0],
                scale: [1, 0.8],
                duration: 300,
                easing: 'easeOutExpo',
                complete: function() {
                    loadGalleryPhotos();
                    // Animate in
                    const newCards = gallery.querySelectorAll('.photo-card');
                    anime({
                        targets: newCards,
                        opacity: [0, 1],
                        scale: [0.8, 1],
                        duration: 400,
                        easing: 'easeOutExpo',
                        delay: anime.stagger(50)
                    });
                }
            });
        }

        function changeLayout(layout) {
            // Update active layout button
            document.querySelectorAll('.layout-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            const gallery = document.getElementById('gallery');
            
            // Remove existing layout classes
            gallery.classList.remove('masonry-grid', 'grid-layout', 'list-layout');
            
            // Add new layout class
            switch(layout) {
                case 'masonry':
                    gallery.classList.add('masonry-grid');
                    break;
                case 'grid':
                    gallery.classList.add('grid-layout');
                    break;
                case 'list':
                    gallery.classList.add('list-layout');
                    break;
            }
            
            currentLayout = layout;
        }

        function loadMorePhotos() {
            currentPage++;
            
            const loading = document.getElementById('loading');
            loading.style.display = 'block';
            
            // Simulate loading delay
            setTimeout(() => {
                loadGalleryPhotos();
                loading.style.display = 'none';
            }, 800);
        }

        function setupSearch() {
            const searchInput = document.getElementById('search-input');
            const searchResults = document.getElementById('search-results');
            
            let searchTimeout;
            
            searchInput.addEventListener('input', function() {
                clearTimeout(searchTimeout);
                const query = this.value.trim().toLowerCase();
                
                if (query.length === 0) {
                    searchResults.style.display = 'none';
                    return;
                }
                
                searchTimeout = setTimeout(() => {
                    performSearch(query);
                }, 300);
            });
            
            // Hide search results when clicking outside
            document.addEventListener('click', function(e) {
                if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
                    searchResults.style.display = 'none';
                }
            });
        }

        function performSearch(query) {
            const searchResults = document.getElementById('search-results');
            const results = photos.filter(photo => 
                photo.title.toLowerCase().includes(query) ||
                photo.description.toLowerCase().includes(query) ||
                getCategoryName(photo.category).toLowerCase().includes(query)
            );
            
            if (results.length === 0) {
                searchResults.innerHTML = '<div class="search-result-item text-gray-400">没有找到相关照片</div>';
            } else {
                searchResults.innerHTML = results.map(photo => `
                    <div class="search-result-item" onclick="selectSearchResult(${photo.id})">
                        <div class="flex items-center">
                            <img src="${photo.url}" alt="${photo.title}" class="w-12 h-12 object-cover rounded mr-3">
                            <div>
                                <h4 class="text-white font-medium">${photo.title}</h4>
                                <p class="text-gray-400 text-sm">${getCategoryName(photo.category)}</p>
                            </div>
                        </div>
                    </div>
                `).join('');
            }
            
            searchResults.style.display = 'block';
        }

        function selectSearchResult(photoId) {
            const photo = photos.find(p => p.id === photoId);
            if (photo) {
                const index = photos.indexOf(photo);
                openLightbox(index);
            }
            document.getElementById('search-results').style.display = 'none';
        }
    </script>
</body>
</html>